<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
	<ui:composition template="/WEB-INF/facelets/templateServicio.xhtml">
		<ui:define name="body">
			<f:view>
				<p:ajaxStatus onstart="statusDialog.show();"
					onsuccess="statusDialog.hide();" />
				<p:dialog modal="true" widgetVar="statusDialog" header="Cargando"
					draggable="false" closable="false">
					<p:graphicImage
						value="#{facesContext.externalContext.request.scheme}://#{facesContext.externalContext.request.serverName}:#{facesContext.externalContext.request.serverPort}#{facesContext.externalContext.request.contextPath}/images/ajaxloadingbar.gif" />
				</p:dialog>
				<h:form id="frm">
					<p:growl id="men" />
					<p:panel id="panelDataTableSolicitudes" header="Solicitudes"
						style="height:400px;width:1070px">
						<p:growl id="msg" />
						<p:dataTable id="tablaSol"
							value="#{casosAsignadosView.solicitudesSer}" var="sol"
							paginator="true" rows="8">
							<p:column headerText="Número Radicación">
								<h:outputText value="#{sol.numeroRadicacion}" />
							</p:column>
							<p:column headerText="Fecha Radicación">
								<p:calendar value="#{sol.fechaCreacion}" pattern="yyyy-MMM-dd"
									disabled="true" />
							</p:column>
							<p:column headerText="Tipo PQR">
								<h:outputText value="#{sol.tipoSolicitudPqr.descTpSol}" />
							</p:column>
							<p:column style="width:32px;text-align: center">
								<p:commandButton update=":dialogAdministrarCaso"
									action="#{casosAsignadosView.administrarCaso}"
									icon="ui-icon-search" title="View">
									<f:setPropertyActionListener value="#{sol.idSolPqr}"
										target="#{casosAsignadosView.selectedSol}" />
								</p:commandButton>
							</p:column>
						</p:dataTable>
					</p:panel>
				</h:form>
				<p:dialog id="dialogAdministrarCaso" appendToBody="true"
					draggable="true" closable="false"
					visible="#{casosAsignadosView.showDialog}" resizable="false"
					modal="true" width="1200">
					<h:form id="formDialog">
						<p:messages id="msgs" />
						<p:wizard flowListener="#{casosAsignadosView.onFlowProcess}"
							backLabel="Atras" nextLabel="Siguiente">
							<p:tab id="tab1" title="Solicitud">
								<p:growl id="msg" />
								<p:panel id="panelSolicitud" style="height:400px;width:1078px">
									<h:panelGrid columns="2" id="panelGrid">
										<h:outputText id="msgTipoDocumento" value="Tipo de Documento:" />
										<h:outputText id="txtTipoDocumento"
											value="#{casosAsignadosView.infoSolicitante.tipoDocumento.descripcionTpDoc}" />

										<h:outputText id="msgNumeroIdentificacion"
											value="Número de Identificación:" />
										<h:outputText id="txtNumeroIdentificacion"
											value="#{casosAsignadosView.infoSolicitante.numeroIdentificacion}" />

										<h:outputText id="msgNombreEmpresa"
											value="Nombre de la Empresa:" />
										<h:outputText id="txtNombreEmpresa"
											value="#{casosAsignadosView.infoSolicitante.nombreEmpresa}" />

										<h:outputText id="msgNombreContacto"
											value="Nombre de Contacto:" />
										<h:outputText id="txtNombreContacto"
											value="#{casosAsignadosView.infoSolicitante.nombreContacto}" />

										<h:outputText id="msgCorreoElectronico"
											value="Correo Electronico:" />
										<h:outputText id="txtCorreoElectronico"
											value="#{casosAsignadosView.infoSolicitante.correoElectronico}" />

										<h:outputText id="msgNumeroCelular" value="Numero Celular:" />
										<h:outputText id="txtNumeroCelular"
											value="#{casosAsignadosView.infoSolicitante.numeroCelular}" />

										<h:outputText id="msgTelefonoFijo" value="Telefono Fijo:" />
										<h:outputText id="txtTelefonoFijo"
											value="#{casosAsignadosView.infoSolicitante.telefonoFijo}" />
									</h:panelGrid>
									<p:separator />
									<h:panelGrid columns="1">
										<h:outputText id="msgDescripcionCaso"
											value="Descripcion del Caso:" />
										<h:inputTextarea id="txtDescripcionCaso"
											value="#{casosAsignadosView.solicitudPqr.descripcionCaso}"
											style="height:200px;width:1050px" disabled="true" />
									</h:panelGrid>
								</p:panel>
							</p:tab>
							<p:tab id="tab2" title="Historial de Respuestas">
								<p:panel id="panelHistorial" style="height:400px;width:1078px">
									<h:panelGrid columns="2" id="observacionesHistorial">
										<h:outputText id="msgHistorial"
											value="No hay historial de respuestas"
											rendered="#{!casosAsignadosView.obser}" />
										<p:dataTable id="observacionesRespuesta"
											value="#{casosAsignadosView.respuestaSol}" var="res"
											paginator="true" rows="3"
											rendered="#{casosAsignadosView.obser}" style="width:900px">
											<p:column headerText="Observación">
												<h:outputText id="txtObservacion"
													value="#{res.descObservacion}" />
											</p:column>
											<p:column headerText="Anexos">
												<p:commandButton id="btnAnexos" value="Ver Anexos"
													action="#{casosAsignadosView.anexos()}"
													update=":dialogAnexos">
													<f:setPropertyActionListener value="#{res.idRespSol}"
														target="#{casosAsignadosView.idRespuesta}" />
												</p:commandButton>
											</p:column>
										</p:dataTable>
									</h:panelGrid>
								</p:panel>
							</p:tab>
							<p:tab id="tab3" title="Añadir Respuesta">
								<p:growl id="msgRespuestas" />
								<p:panel id="panelRespuestas" style="height:435px;width:1138px">
									<h:panelGrid columns="2" id="panelGridRespuestas">
										<h:outputText id="msgObservaciones" value="*Observaciones:" />
										<h:inputTextarea id="txtObservaciones"
											value="#{casosAsignadosView.observacion}"
											style="height:150px;width:1000px"/>

										<h:outputText id="msgAnexos" value="*Anexos (Los tipos de docuemntos que puede ajuntar son jpg-jpeg-png-pdf-xps):" rendered="#{casosAsignadosView.anexos}"/>
										<p:dataTable id="tablaAnexosXArea" paginator="true" rows="10"
											value="#{casosAsignadosView.anexosPqr}" var="anexosPqr"
											rendered="#{casosAsignadosView.anexos}" style="width:1000px">
											<p:column>
												<h:outputText value="#{anexosPqr.descripcionAnexo}" />
											</p:column>
											<p:column headerText="Archivo">
												<p:fileUpload
													fileUploadListener="#{casosAsignadosView.upload}"
													mode="advanced" dragDropSupport="false"
													update="messages,check" 
													fileLimit="1"
													uploadLabel="Subir" label="Seleccionar"
													cancelLabel="cancelar"
													allowTypes="/(\.|\/)(jpg|jpe?g|png|pdf|xps)$/"
													fileLimitMessage="Solo es permitido Seleccionar un archivo" />
												<p:growl id="messages" />
											</p:column>
											<p:column>
												<p:selectBooleanCheckbox id="check"
													binding="#{casosAsignadosView.check}" disabled="true" />
											</p:column>
										</p:dataTable>
										<h:outputText id="msgAsignar"
											value="*Asigne a otra area o envie repuesta:" />
										<p:panelGrid columns="3">
											<h:outputText id="msgAsignarArea" value="Asignar Area:" />
											<h:selectOneMenu id="txtAsignarArea"
												value="#{casosAsignadosView.idArea}">
												<f:selectItem itemValue="-1" itemLabel="Seleccione" />
												<f:selectItems
													value="#{casosAsignadosView.areasInvolucradas}" />
											</h:selectOneMenu>
											<p:commandButton id="btnResSol"
												value="Enviar respuesta al Solicitante"
												action="#{casosAsignadosView.respuestaCliente()}"
												style="width:200px"
												update=":frm:men,:dialogAdministrarCaso,:frm:tablaSol,msgRespuestas" />
										</p:panelGrid>

									</h:panelGrid>
									<div align="center">
										<p:commandButton id="btnSave" value="Guardar"
											action="#{casosAsignadosView.accionGuardarRespuesta()}"
											update=":frm:men,:dialogAdministrarCaso,:frm:tablaSol,msgRespuestas,:frm:panelDataTableSolicitudes" />
										<p:commandButton id="btnlimpiar" value="Limpiar"
											action="#{casosAsignadosView.limpiar()}"
											update="panelRespuestas" />
									</div>
								</p:panel>
							</p:tab>
						</p:wizard>
						<div align="center">
							<p:commandButton id="btnExit" value="Salir"
								action="#{casosAsignadosView.action_closeDialog()}"
								update=":dialogAdministrarCaso :frm:tablaSol,msgRespuestas" />
						</div>
					</h:form>
				</p:dialog>
				<p:dialog id="dialogAnexos" appendToBody="true" draggable="true"
					closable="true" visible="#{casosAsignadosView.showDialogAnexos}"
					resizable="false" modal="true" width="500">
					<h:form id="formDialogAnexos">
						<p:dataTable id="tablaAnexos"
							value="#{casosAsignadosView.anexosRespuestas}" var="anexo"
							paginator="true" rows="3" style="width:400px">
							<p:column headerText="Anexo">
								<h:outputText id="txtAnexo" value="#{anexo.nombreAnexo}" />
							</p:column>
							<p:column headerText="DescargarAnexo">
								<p:commandButton value="Descargar" ajax="false"
									onclick="PrimeFaces.monitorDownload(start, stop);"
									icon="ui-icon-arrowthick-1-s">
									<p:fileDownload
										value="#{casosAsignadosView.fileDownload(anexo)}" />
								</p:commandButton>
							</p:column>
						</p:dataTable>
					</h:form>
				</p:dialog>
			</f:view>
		</ui:define>
	</ui:composition>
</h:body>
</html>